<template>
    <div class="Modal">
        <el-dialog :title="title" v-model="visible" :close-on-click-modal="false" :append-to-body="true"
            :destroy-on-close="true" top="0" @closed="closed" :width="width">
            <div class="modal-content">
                <slot></slot>
            </div>
            <span slot="footer" class="modal-footer">
                <el-button type="primary" v-if="showConfirm" @click="confirm">{{ confirmText }}</el-button>
                <el-button @click="cancel" v-if="showCancel">{{ cancelText }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';

// 定义 props
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    showCancel: {
        type: Boolean,
        default: true
    },
    showConfirm: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '500px'
    },
    cancelText: {
        type: String,
        default: '取 消'
    },
    confirmText: {
        type: String,
        default: '确 定'
    }
});

// 定义 emits
const emits = defineEmits(['update:modelValue', 'confirm', 'closed']);

// 响应式变量
const visible = ref(props.modelValue);

// 监听 props 的变化
watch(() => props.modelValue, (val) => {
    visible.value = val;
});

// 监听 visible 的变化
watch(visible, (val) => {
    if (val !== props.modelValue) {
        emits('update:modelValue', val);
    }
});

// 方法
const cancel = () => {
    emits('update:modelValue', false);
};

const confirm = () => {
    emits('confirm');
};

const closed = () => {
    emits('closed');
    emits('update:modelValue', false);
};
</script>

<style lang="scss">
.el-dialog__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    .el-dialog {
        max-height: calc(100% - 30px);
        max-width: calc(100% - 30px);
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .el-dialog .el-dialog__body {
        height: 100%;
        overflow: auto;

    }

    .el-form {
        .el-form-item {
            display: table;
            width: 100%;

            .el-form-item__label {
                display: table-cell;
            }

            .el-form-item__content {
                display: table-cell;

                .el-select,
                .el-input-number {
                    width: 100%;
                }
            }
        }
    }
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
}
</style>
